<template>
	<div class="grant-container">
		<z-paging ref="paging" v-model="dataList" @query="queryListNew">
			<!-- z-paging默认铺满全屏，此时页面所有view都应放在z-paging标签内，否则会被盖住 -->
			<view slot="top" class="inner-top" style="padding: 20rpx;background-color: #fff;">
				<uni-nav-bar>
					<block slot="left">

					</block>

					<view class="input-view">
						<uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
						<!-- <input confirm-type="search" class="nav-bar-input" type="text" placeholder="请输入批次编号" v-model="queryForm.batchNumber"  /> -->
						<uni-easyinput v-model="queryForm.batchNumber" placeholder="请输入批次编号"></uni-easyinput>

					</view>

					<block slot="right">
						<view class="city" @click="searchBtn">
							搜索
						</view>
					</block>
				</uni-nav-bar>


				<view class="add-btn">
					<view class="middle-font" @click="signBtn">
						<uni-icons type="plusempty" size="25"></uni-icons>
						<text class="label">用品发放</text>
					</view>
				</view>

			</view>

			<!-- 需要固定在页面顶部的view请通过slot="top"插入，包括自定义的导航栏 -->
			<view class="item" v-for="(item,index) in dataList" :key="item.id">
				<uni-list :border="false" class="list-view-item">
					<uni-list-item title="发放批次编号：" :rightText="item.batchNumber" />
					<uni-list-item title="发放部门名称：" :rightText="item.affiliatedDeptName" />
					<uni-list-item title="发放人数：" :rightText="`${item.totalIssued}`" />
					<uni-list-item title="发放物资名称：" :rightText="item.applianceName" />
					<uni-list-item title="每人发放数量：" :rightText="`${item.quantityPerPerson}`" />
					<uni-list-item title="发布人：" :rightText="item.createBy" />
					<uni-list-item title="下发日期：" :rightText="item.deliveryDate" />
					<view class="btns">
						<button @click="handleView(item)" type="primary" size="mini" class="list-btn">查看</button>
						<button @click="disBtn(item)" type="primary" v-if="item.deliveryStatus == 0" class="list-btn"
							size="mini">下发</button>
					</view>
				</uni-list>

			</view>
		</z-paging>
		<!-- 下发二次确认 -->
		<!-- <u-modal v-model="confirShow" :content="content" @confirm="disConfirm"></u-modal> -->
		<!-- 输入框示例 -->
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" type="info" cancelText="取消" confirmText="确定" title="是否下发"
				@confirm="disConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
		<!-- 下发弹窗 -->
		<u-popup v-model="grantShow" mode="left" width="100%" class="view-dialog">
			<u-navbar back-text="" :custom-back="backGrant" title="用品发放" class="view-navbar"></u-navbar>
			<uni-forms ref="baseForm" :rules="rules" class="custom-form" :modelValue="baseFormData">
				<uni-forms-item label="发放部门名称" label-width="80" required name="affiliatedDeptId">
					<custom-tree-select :listData="listData" dataLabel="label" disabled @input="handleInput"
						@selectChange="deptChange" v-model="baseFormData.affiliatedDeptId" />
					</custom-tree-select>
				</uni-forms-item>
				<uni-forms-item label="发放人员" required name="userId">
					<custom-tree-select :listData="userOption" show-children dataLabel="nickName" dataValue="userId"
						:search="true" :mutiple="true" v-model="baseFormData.userIds" />
					</custom-tree-select>
				</uni-forms-item>
				<uni-forms-item label="发放物资名称" required name="applianceId">
					<uni-data-select v-model="baseFormData.applianceId" :localdata="goodsOption"></uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="实际发放数量" required name="quantityPerPerson">
					<uni-easyinput class="uni-mt-5" trim="all" v-model="baseFormData.quantityPerPerson"
						placeholder="请输入数量" type="number"></uni-easyinput>

				</uni-forms-item>
				<uni-forms-item label="有效期" required name="expirationDate">
					<uni-datetime-picker type="date" return-type="timestamp" v-model="baseFormData.expirationDate" />
				</uni-forms-item>

			</uni-forms>
			<button type="primary" @click="submit('valiForm')">确认</button>
		</u-popup>

		<!-- 查看详情 -->
		<u-popup v-model="show" mode="left" width="100%" height="600px">
			<view class="detail">
				<view class="nav-header">
					<view class="nav-left-btn" @click="back">
						< </view>
							<view class="nav-header-title">
								<text class="title">
									查看
								</text>
							</view>
							<view class="nav-right-btn">

							</view>
					</view>
					<!-- 正文内容 -->
					<u-table ref="table" :loading="loading" border stripe type="selection" emptyText="暂无更多数据"
						@selection-change="selectionChange">
						<u-tr class="u-tr">
							<u-th width="150" class="u-td" align="center">姓名</u-th>
							<u-th width="150" class="u-td" align="center">劳保名称</u-th>
							<u-th width="150" class="u-td" align="center"> 是否签收</u-th>
							<u-th width="150" class="u-td" align="center">签收日期</u-th>

						</u-tr>
						<u-tr v-for="(item, index) in tableData" :key="index" class="u-tr">
							<uni-td width="150" class="u-td">{{ item.userName }}</uni-td>
							<uni-td width="150" class="u-td">{{ item.applianceName }}</uni-td>
							<uni-td width="150" class="u-td">

								<text v-if="item.issue == 0">未下发</text>
								<text v-else-if="item.issue == 1">下发</text>
								<text v-else-if="item.issue == 2">签收</text>
							</uni-td>
							<uni-td width="150" class="u-td">{{ item.lodgmentDate }}</uni-td>

						</u-tr>
					</u-table>
					<view class="uni-pagination-box"><uni-pagination show-icon :page-size="pageSize"
							:current="pageCurrent" :total="total" @change="change" /></view>
				</view>
		</u-popup>
	</div>

</template>

<script>
	// import customTreeSelect from "@/pages/components/custom-tree-select.vue"
	import {
		mapGetters
	} from "vuex";
	import {
		listGrantsManage,
		listGoodsManage,
		addGrantsManage,
		sendGrantsManage,
		listSign
	} from "@/api/laobao/index.js";
	import {
		deptTreeSelect,
		listUser
	} from "@/api/system/user.js"
	export default {
		components: {
			// customTreeSelect
		},
		data() {
			return {
				//搜索条件参数
				queryForm: {
					pageNum: 1,
					pageSize: 10
				},

				//登录人信息
				localRes: {},
				// 基础表单数据
				baseFormData: {

				},
				content: "是否确定下发?",
				formData: {
					selected: ''
				},
				//下发模态框
				confirShow: false,
				listData: [],
				//下发部门
				treeData: [],
				//校验数据
				rules: {},
				//部门数据
				deptList: [{
					value: 0,
					text: '测试部门'
				}],
				//发放人员的option
				userOption: [],
				//发放物资名称
				goodsOption: [],
				// v-model绑定的这个变量不要在分页请求结束中自己赋值，直接使用即可
				dataList: [],
				// 每页数据量
				pageSize: 10,
				// 当前页
				pageCurrent: 1,
				// 数据总量
				total: 0,
				//用品发放的数据
				tableData: [],
				//查看的弹窗
				show: false,
				//发放的弹窗
				grantShow: false,
				//查看列表的loading
				loading: false
			};
		},
		mounted() {
			this.getList()
			this.getDeptTree()
			this.getUserInfo()
		},
		computed: {
			...mapGetters(["allUsers"]),
		},
		watch: {
			grantShow: {
				handler(val) {}
			}
		},
		methods: {
			onSearch(val) {
				// console.log("val==", val)
			},
			//input事件
			handleInput(val) {
				console.log("测试的", val, )
			},
			//搜索按钮
			searchBtn() {
				// this.queryForm = {
				// 	pageNum: 1,
				// 	pageSize: 10,

				// }
				this.getList()
			},
			//清除按钮
			clear(res) {
				this.queryForm = {
					pageNum: 1,
					pageSize: 10,
				}
				this.getList()
			},
			done(data) {
				console.log("完结", data)
			},
			/** 查询部门下拉树结构 */
			async getDeptTree() {
				const response = await deptTreeSelect();
				this.listData = response.data;

			},
			//获取登录人信息
			getUserInfo() {
				this.localRes = uni.getStorageSync("userInfo")

				console.log("获取数据", this.localRes)
			},
			//下发按钮
			disBtn(row) {
				this.checkId = row.id
				// this.confirShow = true
				this.$refs.inputDialog.open()
			},
			//取消
			dialogClose() {},
			//下发确认
			async disConfirm(val) {
				let params = {
					id: this.checkId,
				};
				let res = await sendGrantsManage(params)
				this.getList()
				uni.showToast({
					title: '下发成功'
				})
				// 关闭窗口后，恢复默认内容
				this.$refs.inputDialog.close()

			},

			//部门的change事件
			async deptChange(val) {
				console.log("val===", val)
				if (val.length <= 0) return
				// console.log("等于0", this.baseFormData.affiliatedDeptId, val)
				// this.baseFormData.affiliatedDeptId = val
				let query = {
					affiliatedCompany: val[0].id,
					pageNum: 1,
					pageSize: 100
				};
				let userQuery = {
					deptId: val[0].id,
				}

				const response = await listGoodsManage(query);
				let res = await listUser(userQuery);
				this.userOption = res.rows

				this.goodsOption = response.rows.map((item) => {
					return {
						text: item.itemName,
						value: item.id,
					};
				});
			},
			//搜索按钮
			async getList(val) {
				// console.log("搜索参数", this.queryForm.batchNumber)
				uni.showLoading({
					title: "加载中"
				})
				// this.$refs.paging.reload()
				let res = await listGrantsManage(this.queryForm)
				this.dataList = res.rows
				uni.hideLoading()

			},
			//查看按钮
			async handleView(row) {
				let query = {
					releaseId: row.id
				}
				console.log("查看的", row)
				let res = await listSign(query)
				this.tableData = res.rows
				this.show = true
			},
			//确认按钮
			submit(ref) {
				this.$refs['baseForm'].validate().then(res => {

					this.baseFormData.affiliatedDeptId = this.baseFormData.affiliatedDeptId[0]
					console.log('success', res, this.baseFormData);
					addGrantsManage(this.baseFormData).then(() => {
						uni.showToast({
							title: `新增成功`
						})
						this.grantShow = false
						this.baseFormData = {}
						this.getList()
					})

				}).catch(err => {
					console.log('err', err);
				})
			},
			//发放按钮
			signBtn(item) {

				this.baseFormData.affiliatedDeptId = [this.localRes.deptId];
				this.grantShow = true

			},
			//返回接口
			back() {
				this.show = false
			},
			//下发返回
			backGrant() {
				// console.log("返回", )
				this.baseFormData = {}
				this.grantShow = false
			},
			// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用this.$refs.paging.reload()即可
			async queryListNew(pageNo, pageSize) {
				let query = {
					pageNum: pageNo,
					pageSize: pageSize
				}
				let res = await listGrantsManage(query)
				// this.$request.listGrantsManage({ pageNo,pageSize }).then(res => {
				// 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
				let list = res.rows
				this.$refs.paging.complete(list);
				// }).catch(res => {
				// 如果请求失败写this.$refs.paging.complete(false)，会自动展示错误页面
				// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
				// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
				// 	this.$refs.paging.complete(false);
				// })
			}
		},
	};
</script>
<style lang="scss" scoped>
	.grant-container {
		padding: 24rpx;
		$nav-height: 30px;

		::v-deep {
			.uni-navbar {
				.uni-navbar--border {
					background-color: transparent !important;
					border-bottom: none !important;

					.uni-navbar__header {
						background-color: transparent !important;

						.uni-navbar__header-btns-left {
							width: 0 !important;
						}

						.uni-navbar__header-btns-right {
							.city {
								color: #137EE9;
								font-size: 18px;
								font-weight: 400;
							}
						}
					}
				}
			}
		}


		.input-view {
			/* #ifndef APP-PLUS-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			// width: 500rpx;
			flex: 1;
			background-color: #f8f8f8;
			height: $nav-height;
			border-radius: 15px;
			padding: 0 15px;
			flex-wrap: nowrap;
			margin: 7px 0;
			line-height: $nav-height;

			::v-deep {
				.is-input-border {
					border: none;
					background-color: transparent !important;
				}
			}
		}


		.input-uni-icon {
			line-height: $nav-height;
		}

		.nav-bar-input {
			height: $nav-height;
			line-height: $nav-height;
			/* #ifdef APP-PLUS-NVUE */
			width: 370rpx;
			/* #endif */
			padding: 0 5px;
			font-size: 12px;
			background-color: #f8f8f8;
		}

		.view-dialog {
			.view-navbar {
				::v-deep {
					.u-icon__icon {
						font-size: 20px !important;
						font-weight: 600;
					}
				}
			}

			.custom-form {
				padding: 24rpx;

				::v-deep {
					.uni-forms-item {}

					.uni-forms-item__label {
						width: 110px !important;
					}
				}
			}

		}

		.inner-top {
			background: linear-gradient(360deg, #fbfbfb 10%, #B8D7FF 100%);
		}

		.z-paging-content-fixed {
			top: 216rpx !important;
		}

		// .custom-form {
		// 	padding: 24rpx;
		// }

		.detail {
			width: 100vw;
			height: 100vh;
			background: linear-gradient(180deg, #B8D7FF 0%, rgba(202, 231, 255, 0) 100%);

			/* 确保导航栏在顶部 */
			.nav-header {
				color: rgb(51, 51, 51);
				background-color: transparent;
				height: 154rpx;
				display: flex;
				padding: 0 10px;
				flex-direction: row;

				.nav-left-btn {
					display: flex;
					width: 60px;
					justify-content: flex-start;
					align-items: center;
					color: #666666;
				}

				.nav-header-title {
					display: flex;
					flex: 1;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					padding: 0 10px;
					overflow: hidden;

					.title {
						font-weight: 600;
						font-size: 32rpx;
						color: #17233D;
					}
				}

				.nav-right-btn {
					display: flex;
					width: 60px;
					justify-content: flex-end;
					align-items: center;
				}
			}
		}

		.add-btn {
			height: 176rpx;
			margin-bottom: 20rpx;
			background: #ffffff;
			border-radius: 16rpx;
			border: 2rpx dashed #c5c8ce;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 26rpx;
			color: #808695;
			line-height: 176rpx;
			text-align: center;
			font-style: normal;
		}

		.item {
			background-color: #fff;


			.uni-list {
				box-shadow: 3px 3px 5px 2px rgba(222, 222, 222, 0.5);
			}

			.list-view-item {
				margin-bottom: 20rpx;
				padding: 20rpx;
				background: #ffffff;
				border-radius: 16rpx;
			}

			.btns {
				margin-top: 20rpx;
				text-align: right;

				::v-deep {
					.list-btn {
						height: 64rpx;
						background: #137ee9;
						border-radius: 8rpx;
						margin: 8rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #ffffff;
						line-height: 64rpx;
						text-align: center;
						font-style: normal;
					}

					.is-hover {
						background-color: #0062cc;
					}

					.list-click {
						margin-right: -120rpx;
						background: #ffffff;
						color: #000;
					}
				}
			}


		}
	}
</style>